<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 14px;
				font-family: "微软雅黑";
			}
			
			.r {
				float: right;
			}
			
			.l {
				float: left;
			}
			
			.cle {
				clear: both;
			}
			
			#z_div {
				margin: 0px auto;
				width: 1010px;
				height: 600px;
				/*border: 1px solid;*/
				position: relative;
				z-index: 1;
			}
			
			#div_l {
				padding: 10px;
				float: left;
				width: 260px;
				height: 580px;
				/*border: 1px solid;*/
				background-color: #2E3238;
				position: relative;
				color: #ffffff;
			}
			
			#div_l_1 {
				position: relative;
				padding: 10px 0px;
				line-height: 50px;
				/*border: 1px solid #ffffff;*/
				font-size: 18px;
				font-weight: bold;
			}
			
			#div_l_1 img {
				vertical-align: middle;
			}
			
			#caidan:hover {
				cursor: pointer;
			}
			
			.xuanx {
				position: absolute;
				top: 50px;
				right: 0px;
				border: 1px solid white;
				width: 174px;
				height: 252px;
				z-index: 1000;
				/*background-color: #FFFFFF;*/
				display: none;
			}
			
			.xuanx div:hover {
				background-color: #000000;
				opacity: 0.05;
				cursor: pointer;
			}
			
			.xx_1 {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 172px;
				height: 50px;
				border: 1px solid;
			}
			
			.xx_2 {
				position: absolute;
				top: 50px;
				right: 0px;
				width: 172px;
				height: 50px;
				border: 1px solid;
			}
			
			.xx_3 {
				position: absolute;
				top: 100px;
				right: 0px;
				width: 172px;
				height: 50px;
				border: 1px solid;
			}
			
			.xx_4 {
				position: absolute;
				top: 150px;
				right: 0px;
				width: 172px;
				height: 50px;
				border: 1px solid;
			}
			
			.xx_5 {
				position: absolute;
				top: 200px;
				right: 0px;
				width: 172px;
				height: 50px;
				border: 1px solid;
			}
			
			#sousuo {
				width: 220px;
				height: 33px;
				background-color: #26292E;
				border: 0px;
				position: absolute;
				top: 0px;
				left: 28px;
			}
			
			#div_l_2 {
				height: 33px;
				position: relative;
			}
			
			#div_l_2 img {
				position: absolute;
				top: 0px;
				left: 0px;
			}
			
			.haoyou {
				padding: 10px 0px;
				height: 40px;
				/*border: 1px solid white;*/
				margin-top: 2px;
				/*border-bottom: 1px solid #292C33;*/
			}
			
			#div_r {
				float: left;
				width: 720px;
				height: 100%;
				/*border: 1px solid;*/
				background-color: #EEEEEE;
				position: relative;
			}
			
			#kaishi {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 100000;
			}
			
			#duixiang {
				background-image: url(img/weixin/duixiang_bg.png);
				/*margin: 0px auto;*/
				line-height: 58px;
				width: 720px;
				text-align: center;
			}
			
			#ltneirong {
				height: 350px;
				/*border: 1px solid;*/
				overflow: auto;
			}
			
			#bqtp {
				height: 50px;
				position: relative;
			}
			
			#biaoqing {
				background-color: #FFFFFF;
				position: absolute;
				top: -120px;
				left: 15px;
				z-index: 10;
				display: none;
			}
			
			#kuang {
				height: 140px;
				position: relative;
				/*border: 1px solid;*/
			}
			
			#fsnr {
				width: 718px;
				height: 100px;
				background-color: #EEEEEE;
			}
			
			#btn_fs {
				position: absolute;
				bottom: 4px;
				right: 14px;
				width: 90px;
				line-height: 30px;
				background-color: #FFFFFF;
				border: 1px solid #C1C1C1;
				text-align: center;
				border-radius: 5px;
			}
			
			.hua {
				margin-top: 10px;
				overflow: hidden;
			}
			
			.tou img {
				width: 40px;
				height: 40px;
				margin: 0px 10px;
				border-radius: 20px;
			}
			
			.wen {
				line-height: 20px;
				position: relative;
			}
			
			.wen p:nth-child(2) {
				background-color: #B2E281;
				padding: 4px 2px;
				max-width: 600px;
			}
			
			.wen p:nth-child(1) {
				color: #888888;
			}
			
			.sj {
				text-align: center;
				margin: 0px auto;
				width: 70px;
				height: 20px;
				color: #FFFFFF;
				font-size: 12px;
				background-color: #DCDCDC;
			}
			
			.t_r {
				text-align: right;
			}
			
			.haoyou img {
				/*padding: 10px 0px;*/
				width: 40px;
				height: 40px;
				vertical-align: top;
				margin-right: 10px;
			}
			
			#pengyou {
				/*height: 420px;*/
				/*overflow: hidden;*/
			}
			
			#ts {
				position: absolute;
				bottom: 8px;
				right: 105px;
				color: #888888;
				font-size: 12px;
			}
			
			.div_gn1 {
				width: 38px;
				height: 38px;
				/*border: 1px solid;*/
				position: absolute;
				top: 10px;
				left: 12px;
			}
			
			.div_gn2 {
				width: 38px;
				height: 38px;
				/*border: 1px solid;*/
				position: absolute;
				top: 10px;
				left: 80px;
			}
			
			.zhong_hei {
				background-color: #3A3F45;
			}
			
			#pengyou,
			.fsxx,
			.div_gn1,
			.div_gn2,
			.daohang1,
			.daohang2,
			.daohang3,
			#btn_fs:hover {
				cursor: pointer;
			}
			
			#div_l_3 {
				position: relative;
			}
			
			.daohang1 {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 86px;
				height: 100%;
			}
			
			.daohang2 {
				position: absolute;
				top: 0px;
				left: 86px;
				width: 86px;
				height: 100%;
			}
			
			.daohang3 {
				position: absolute;
				top: 0px;
				left: 172px;
				width: 86px;
				height: 100%;
			}
			
			#beijin {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 0;
			}
			
			.py_gd {
				height: 420px;
				position: relative;
				overflow: hidden;
			}
			
			#dong {
				width: 10px;
				height: 80px;
				border-radius: 10px;
				background-color: #404449;
			}
			
			#gundong {
				width: 10px;
				height: 440px;
				position: absolute;
				top: 160px;
				right: 0px;
				background-color: #2E3238;
			}
			
			.guishu img {
				/*margin: 5px 0px;*/
				width: 30px;
				height: 30px;
				border-radius: 15px;
				vertical-align: middle;
				margin-right: 10px;
			}
			
			.guishu {
				background-color: #292D32;
				line-height: 30px;
				font-size: 14px;
				font-weight: bold;
			}
			
			#xiangxi {
				position: absolute;
				z-index: 2000;
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
				display: none;
			}
			
			#zinr {
				margin: 0px auto;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				width: 200px;
				/*height: 400px;*/
				/*border: 1px solid;*/
				/*background-color: #0072E3;*/
			}
			
			#zinr img {
				width: 100px;
				height: 100px;
				/*margin-bottom: 20px;*/
			}
			/*#dapy{
				width: 100%;
				height: 440px;
			}*/
			
			.fsxx {
				display: inline-block;
				width: 200px;
				line-height: 40px;
				border-radius: 5px;
				background-color: #42AC3E;
				color: white;
				margin-top: 20px;
			}
			
			.zuo_jt {
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-right: 0px solid;
				border-left: 8px solid #B2E281;
				position: absolute;
				top: 22px;
				right: -7px;
			}
			
			.you_jt {
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-left: 0px solid;
				border-right: 8px solid #B2E281;
				position: absolute;
				top: 22px;
				left: -7px;
			}
			
			#xx_name {
				font-size: 24px;
				/*font-weight: bold;*/
				display: block;
				margin: 20px 0px;
			}
			
			.hui {
				color: #999999;
			}
			
			#_iframe {
				width: 100%;
				height: 540px;
				/*background-color: #000000;*/
				position: absolute;
				top: 50px;
				left: 0px;
				z-index: 10000;
				display: none;
			}
			
			.fenzu {
				background-color: #292D32;
				line-height: 30px;
				text-indent: 4px;
				font-size: 14px;
				color: #787B87;
			}
		</style>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/china_english.js"></script>
		<script src="js/haoyou.js"></script>
		<script type="text/javascript">
			function liebiao1() {
				//				创建列表
				//				for(var i in hao_you) {
				//					var dx = '<div class="haoyou" a="' + i + '"><img src="img/face/' + hao_you[i].touxiang + '"/>' + hao_you[i].name + '</div>';
				//					$(dx).appendTo($('#pengyou'));
				//				}
			}

			function liebiao2() {
				var guishu = '';

				for(var i in gz_hao) {
					if(guishu != gz_hao[i].shuyu) {
						guishu = gz_hao[i].shuyu;
						var bt = '<div class="guishu" ><img src="img/face/' + gz_hao[i].touxiang + '"/>' + guishu + '</div>';
						$(bt).appendTo($('#pengyou'));
					}
					//					console.log(guishu);
					var dx = '<div class="haoyou" a="' + i + '"><img class="r" src="img/face/' + gz_hao[i].touxiang + '"/>' + gz_hao[i].name + '</div>';
					$(dx).appendTo($('#pengyou'));
				}
			}

			function liebiao3() {
				for(var i in hao_you) {
					var dx = '<div class="haoyou" a="' + i + '"><img src="img/face/' + hao_you[i].touxiang + '"/>' + hao_you[i].name + '</div>';
					$(dx).appendTo($('#pengyou'));
				}
				var s_zimu = ''; //首字母
				for(var i = 0; i < $('.haoyou').length; i++) {
					for(var j = 0; j < $('.haoyou').length - i - 1; j++)
						if(query($('.haoyou').eq(j).text()) > query($('.haoyou').eq(j + 1).text())) {
							//							console.log(query($('.haoyou').eq(j).text())[0]+'::'+query($('.haoyou').eq(j+1).text()));
							$('.haoyou').eq(j).insertAfter($('.haoyou').eq(j + 1));
						}
				}
				for(var i = 0; i < $('.haoyou').length; i++) {
					if(s_zimu != (query($('.haoyou').eq(i).text())[0])) {
						s_zimu = query($('.haoyou').eq(i).text())[0];
						//插入新的abcd
						$('<div class="fenzu">' + s_zimu + '</div>').insertBefore($('.haoyou').eq(i));
					}
				}
			}
		</script>
		<script type="text/javascript">
			$(function() {
				for(var i = 1; i < 76; i++) {

					var $img1 = $('<img src="img/faceImg/' + i + '.gif" bj="/' + i + '/" />');
					$('#biaoqing').append($img1);
					if((i % 15) == 0) {
						$('#biaoqing').html($('#biaoqing').html() + '<br/>');
					}

				}

				$('#caidan').click(function() {
					$('.xuanx').toggle();
				});
				$('.xx_5').click(function() {
					$('#z_div').remove();
				});

			});
		</script>
	</head>

	<body onselectstart="return false">
		<img id="beijin" src="img/bg.jpg" />
		<div id="z_div">
			<!--左侧导航栏-->
			<div id="div_l">
				<div id="div_l_1">
					<div class="xuanx">
						<div class="xx_1"></div>
						<div class="xx_2"></div>
						<div class="xx_3"></div>
						<div class="xx_4"></div>
						<div class="xx_5"></div>
						<img src="img/caidan.png" />
					</div>
					<img src="img/face/4.jpg" style="width: 40px;" /> 小马哥<img id="caidan" class="r" src="img/weixin/xuanxiang.png" /></div>
				<div id="div_l_2"><img src="img/weixin/fada.png" /><input type="text" id="sousuo" placeholder="搜索" /></div>
				<div id="div_l_3">
					<div class="daohang1"></div>
					<div class="daohang2"></div>
					<div class="daohang3"></div>
					<img id="dh_img" src="img/weixin/a1.png" />
				</div>
				<div id="dapy">
					<div class="py_gd">
						<div id="pengyou">
							<!--<div class="haoyou zhong_hei"><img src="img/face/10.jpg"/>好友1	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友2	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友3	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友4	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友5	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友6	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友7	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友8	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友9	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友10</div>
							-->
						</div>

					</div>
					<div id="gundong">
						<div id="dong"></div>
					</div>
				</div>
			</div>
			<!--右侧聊天室-->

			<div id="div_r">
				<div id="xiangxi">
					<div id="zinr">
						<img src="img/face/10.jpg" /><br />
						<span id="xx_name"></span>
						<span class="hui">备注：</span><span id="xx_beizhu" class="hui"></span><br />
						<span class="fsxx">发消息</span>
					</div>
				</div>
				<img src="img/chushi.png" id="kaishi" />
				<div id="duixiang">
					聊天的对象
				</div>
				<div id="ltneirong">
					<div class="sj">2:00:00</div>

					<div class="hua">
						<div class="tou l"><img src="img/face/1.jpg" /></div>
						<div class="wen l">
							<p>昵称</p>
							<p>头像随机，间隔3秒后输入出时间</p>
						</div>
					</div>

				</div>
				<div id="bqtp">
					<div id="biaoqing">

					</div>
					<div class="div_gn1"></div>
					<div class="div_gn2">
					</div>
					<input type="file" id="wenj" style="display: none;">

					<img src="img/weixin/biaoqing.png" /></div>
				<div id="kuang">
					<textarea id="fsnr"></textarea>
					<br />
					<span id="ts">
						按下Ctrl+Enter换行&nbsp;&nbsp;&nbsp;
					</span>
					<div id="btn_fs">发送</div>
				</div>
				<div id="_iframe">
					<iframe id="iframe_z" src="gzh/gzh1.html" width="100%" height="100%"></iframe>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var xx = false;
			var gdhig = parseInt($('#gundong').css('height'));
			var gdwz = $('#gundong').offset().top;
			var neihig = 0;
			//滚动条隐藏
			//				$('#gundong').hide();
			//			$('#dapy').mouseover(function(){
			//				$('#gundong').show();
			//			});
			//			$('#dapy').mouseout(function(){
			//				$('#gundong').hide();
			//			});

			//			滚动条
			function yidong() {
				var xx = (neihig + 20 - gdhig) / (gdhig - 80);
				xx = Math.abs(xx);
				$('#pengyou').css('margin-top', -1 * ($('#dong').offset().top - gdwz) * xx);
			}

			$('#dong').mousedown(function() {
				xx = true;
				neihig = parseInt($('#pengyou').css('height'));
			});
			$('#gundong').mousedown(function(e) {
				var theEvent = window.event || e;
				var sbwz = theEvent.clientY + $('body').scrollTop();
				if((sbwz - gdwz) > 40 && (sbwz - gdwz) < (gdhig - 40)) {
					$('#dong').offset({
						top: (theEvent.clientY + $('body').scrollTop() - 40)
					});
					yidong();
				}

			});
			$('body').mouseup(function() {
				xx = false;
			});
			$('body').mousemove(function(e) {
				var theEvent = window.event || e;
				//				有滚动条时   +$('body').scrollTop()
				var sbwz = theEvent.clientY + $('body').scrollTop();

				if(xx && (sbwz - gdwz) > 40 && (sbwz - gdwz) < (gdhig - 40)) {
					$('#dong').offset({
						top: (sbwz - 40)
					});
					yidong();
					//				console.log($('#dong').offset().top);
				} else {
					xx = false;
					return;
				}

			});

			//聊天窗口	
			function huan(a) {
				for(var i = 0; i < a.length; i++) {
					a = a.replace('<', '&lt;');
					a = a.replace('>', '&gt;');
				}
				for(var i = 0; i < a.length; i++) {
					a = a.replace('\n', '<br/>');
				} //文本框输入\n不转换
				var zu = [];
				var ze = /\/(\d{1,2})\//g;
				var arr = [];
				while(arr = ze.exec(a)) {
					zu.push(arr[1]);
				}

				//				var arr = a.match(/\/\d\//g);
				//				console.log(arr);
				if(zu) {
					for(var i = 0; i < zu.length; i++) {
						a = a.replace(/\/\d{1,2}\//, '<img src="img/faceImg/' + zu[i] + '.gif"/>');
					}
				}
				return a;
			}
			var _time = new Date();
			var y_time = _time.getTime();
			$(function() {
				function fas() {
					var _text = $("#fsnr").val();
					//					alert('adf\nadsf');
					if(_text.trim() == '') {
						$("#fsnr").val('');

						return;
					}
					_text = huan(_text.trim());
					var x_dat = new Date();
					var dqtime = x_dat.getTime();
					if((dqtime - y_time) > 3000) {
						var shi = x_dat.getHours();
						var fen = x_dat.getMinutes();
						var miao = x_dat.getSeconds();
						var shijian = shi + ':' + fen + ':' + miao;
						var sj = '<div class="sj">' + shijian + '</div>';
						$(sj).appendTo('#ltneirong');
					}
					y_time = dqtime;
					var nm = '小马哥';

					//自己
					var xinnr = '<p class="t_r">' + nm + '</p><p>' + _text + '</p>' + '<div class="zuo_jt"></div>';

					var div2 = '<div class="wen r">' + xinnr + '</div>';

					var div3 = '<div class="hua"><div class="tou r"><img src="img/face/4.jpg" /></div>' + div2 + '</div>';
					//对方

					$.get("http://www.tuling123.com/openapi/api", {
						key: "0db996e62ad2434094778b1ebeafc727",
						info: $("#fsnr").val(),
						userid: "123456"
					}, function(date) {
						//处理机器人返回的信息
						//处理航班
						var urltex = ""
						if(date.url) {
							urltex = "<a  href='" + date.url + "' target='_blank'+>" + "点击显示" + "</a>"
						}
						//处理新闻
						//						if(date.list) {
						//							var div1 = $('<div id="left"><div class="face"></div></div>');
						//							var tex1 = $("<div id='center'></div>");
						//							var div2 = $("<div id='center_datu'></div>");
						//							var img = $("<img src='" + date.list[0].icon + "' />");
						//							var p = $("<p id='center_datu_p'></p>");
						//							var a = $("<a href='" + date.list[0].detailurl + "' target='_blank'+>" + date.list[0].article + "</a>");
						//							var xidiv = $("<div></div>");
						//							var p1 = $("<p class='wu_top'></p>");
						//							var a1 = $("<a href='" + date.list[1].detailurl + "' target='_blank'+>" + date.list[1].article + "</a>");
						//							var img1 = $("<img id='img' src='" + date.list[1].icon + "' />");
						//							xidiv.append(img1);
						//							xidiv.append(p1);
						//							p1.append(a1);
						//
						//							var p2 = $("<p class='wu_top'></p>");
						//							var a2 = $("<a href='" + date.list[2].detailurl + "' target='_blank'+>" + date.list[2].article + "</a>");
						//							var img2 = $("<img id='img' src='" + date.list[2].icon + "' />");
						//							xidiv.append(img2);
						//							xidiv.append(p2);
						//							p2.append(a2);
						//
						//							p.append(a);
						//							div2.append(img);
						//							div2.append(p);
						//							tex1.append(div2);
						//							div1.append(tex1);
						//							tex1.append(xidiv)
						//							$("#middle").append(div1);
						//							$("#middle")[0].scrollTop = $("#middle")[0].scrollHeight;
						//						} else {
						//							var div1 = $('<div id="left"><div class="face"></div></div>');
						//							var tex1 = $("<div class='tex'>" + date.text + urltex + "</div>");
						//							div1.append(tex1);
						//							$("#middle").append(div1);
						//							$("#middle")[0].scrollTop = $("#middle")[0].scrollHeight;
						var xinnr_1 = '<p>' + dqdx_name + '</p><p>' + date.text + urltex  + '<div class="you_jt"></div>';

						var div2_1 = '<div class="wen l">' + xinnr_1 + '</div>';

						var div3_1 = '<div class="hua"><div class="tou l"><img src="img/face/' + dqdx_img + '" /></div>' + div2_1 + '</div>';
						$(div3).appendTo("#ltneirong");
						$(div3_1).appendTo("#ltneirong");
						$("#fsnr").val('');
						$('#ltneirong')[0].scrollTop = $('#ltneirong')[0].scrollHeight;
						//						}
					})

					//					}

					//					alert(hao_you[j].liaotian);
					hao_you[j].liaotian = $('#ltneirong').html();
					//					alert(hao_you[j].liaotian);
				}

				$('#fsnr').keyup(function(e) {
					//					alert(event.keyCode);//输入法切换后键值不同
					var theEvent = window.event || e;
					if(theEvent.ctrlKey && theEvent.keyCode == 13) {
						$("#fsnr").val($("#fsnr").val() + '\n');
					} else if(theEvent.keyCode == 13) {
						fas();
					}

				});

				$('#btn_fs').click(fas);
			});
			$(function() {
				$('.div_gn1').click(function() {
					$("#biaoqing").toggle();
				});
				$('#biaoqing img').click(function() {
					var tm = $(this).attr('bj');
					//				alert(tm);
					$("#fsnr").val($("#fsnr").val() + tm);
					$("#biaoqing").toggle();

				});
				$(".div_gn2").click(function() {
					$('#wenj').click();
				});
			});
		</script>
		<!--//聊天窗口-->
		<script type="text/javascript">
			var j = 0;
			var dqdx_name = hao_you[j].name;
			var dqdx_img = hao_you[j].touxiang;
			var dqdx_nr = hao_you[j].liaotian;
			var wzzt = 1;

			function shijian() {

				$('.haoyou').click(function() {
					$('#kaishi').hide();
					$('.haoyou').removeClass('zhong_hei');
					$(this).addClass('zhong_hei');
					var a = $(this).attr('a');
					j = a;
					//				alert(a);
					if(wzzt == 1) {
						dqdx_name = hao_you[a].name;
						dqdx_img = hao_you[a].touxiang;
						dqdx_nr = hao_you[a].liaotian;
					} else if(wzzt == 2) {
						dqdx_name = gz_hao[a].name;
						dqdx_img = gz_hao[a].touxiang;
						dqdx_nr = gz_hao[a].liaotian;
						$('#iframe_z')[0].src = gz_hao[a].neir;
					} else {
						dqdx_name = hao_you[a].name;
						dqdx_img = hao_you[a].touxiang;
						dqdx_nr = hao_you[a].liaotian;
					}

					$('#duixiang').html(dqdx_name);
					$('#ltneirong').html(dqdx_nr);

				});
			}

			function hyxiang() {

				$('.haoyou').click(function() {
					$('#kaishi').hide();
					$('.haoyou').removeClass('zhong_hei');
					$(this).addClass('zhong_hei');
					var a = $(this).attr('a');
					j = a;
					//				alert(a);
					dqdx_name = hao_you[a].name;
					dqdx_img = hao_you[a].touxiang;
					dqdx_nr = hao_you[a].liaotian;
					var dqdx_beizhu = hao_you[a].weixinhao;
					$('#zinr img')[0].src = 'img/face/' + dqdx_img;
					$('#xiangxi #xx_name').html(dqdx_name);
					$('#xiangxi #xx_name').attr('a', a);
					$('#xiangxi #xx_beizhu').html(dqdx_beizhu);
					$('#xiangxi')[0].style.display = 'table';
				});
			}
		</script>
		<script type="text/javascript">
			liebiao1();
			shijian();
			var zuijin = $('#pengyou').html();
			$('.daohang1').click(function() {
				$('#_iframe').hide();
				$('#dh_img').attr('src', 'img/weixin/a1.png');
				$('#pengyou').html('');
				//				liebiao1();
				$('#pengyou').html(zuijin);
				shijian();
				wzzt = 1;
				$('#kaishi').show();
				$('#xiangxi').hide();
				$('#pengyou').css('margin-top', '0px');
				$('#dong').offset({
					top: ($('#gundong').offset().top)
				});
			});
			$('.daohang2').click(function() {
				$('#dh_img').attr('src', 'img/weixin/a2.png');
				$('#pengyou').html('');
				liebiao2();
				shijian();
				wzzt = 2;
				$('#kaishi').show();
				$('#xiangxi').hide();

				$('#_iframe').show();

				$('#pengyou').css('margin-top', '0px');
				$('#dong').offset({
					top: ($('#gundong').offset().top)
				});
			});
			$('.daohang3').click(function() {
				$('#_iframe').hide();
				$('#dh_img').attr('src', 'img/weixin/a3.png');
				$('#pengyou').html('');
				liebiao3();
				shijian();
				wzzt = 3;
				$('#kaishi').show();
				hyxiang();
				$('#pengyou').css('margin-top', '0px');
				$('#dong').offset({
					top: ($('#gundong').offset().top)
				});
			});

			$('.fsxx').click(function() {
				//				$('#xiangxi').hide();
				//				$('#dh_img').attr('src', 'img/weixin/a1.png');
				//				$('#pengyou').html('');
				//				liebiao1();
				//				shijian();
				//				wzzt = 1;
				$('.daohang1').click();
				$('#kaishi').hide();
				var cunzai_yn = true; //不存在
				$('#pengyou .haoyou').each(function() {
					if($(this).text() == $('#xiangxi #xx_name').html()) {
						$(this).prependTo('#pengyou');
						cunzai_yn = false;
						//								$('.haoyou').eq(j).insertAfter($('.haoyou').eq(j+1));
					}
				});
				if(cunzai_yn) {
					//创建新的放第一位

					//					alert($('#xiangxi #xx_name').attr('a'));
					var dx = '<div class="haoyou" a="' + $('#xiangxi #xx_name').attr('a') + '">' + $('#zinr img')[0].outerHTML + $('#xiangxi #xx_name').html() + '</div>';
					$(dx).prependTo($('#pengyou'));
				}
				zuijin = $('#pengyou').html();
				$('#pengyou .haoyou').eq(0).addClass('zhong_hei');
				//						<div class="haoyou"><img src="img/face/10.jpg"/>好友2	</div>

			});
		</script>
	</body>

</html>